<template>
  <div class="page-style">
    <el-row>
      <el-col :span="14" :offset="5">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="授权名" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="微信号" prop="wechat">
            <el-input v-model="form.wechat" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="身份证" prop="id_num">
            <el-input v-model="form.id_num" />
          </el-form-item>
          <el-form-item label="省市区" prop="province">
            <el-cascader
              v-model="form.province"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="授权品牌选择">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="阿拉膳" name="1">
                <el-form label-width="120px">
                  <el-form-item label="代理级别" prop="name">
                    <el-select v-model="agentLev" placeholder="请选择代理级别">
                      <el-option
                        label="股东"
                        value="1"
                      />
                      <el-option
                        label="官方"
                        value="2"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="上级代理授权码" prop="name">
                    <el-input v-model="form.name" />
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="中科特膳" name="2">
                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="card-title">说明</span>
          </div>
          <ul>
            <li>上级代理授权代码不填时,上级直接归到总部</li>
            <li>会自动生成代理商后台的登陆帐号与密码</li>
            <li>帐号为：微信号</li>
            <li>密码为：手机号后6位</li>
            <li>授权品牌的授权代码会自动生成的</li>
            <li>根据品牌代理级别中的设置，默认二维码首页中微信号和电话是否显示</li>

          </ul>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import { checkPhoneNumber, IdentityCodeValid } from '@/utils/rules'
export default {
  data() {
    return {
      form: {
        name: '',
        wechat: '',
        phone: '',
        id_num: '',
        address: '',
        province: '',
        city: '',
        area: ''
      },
      agentLev: '',
      activeNames: '',
      options: regionDataPlus,
      addressValue: [],
      rules: {
        name: [
          { required: true, message: '请输入授权明', trigger: 'blur' }
        ],
        wechat: [
          { required: true, message: '请输入正确的微信号码', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: checkPhoneNumber, trigger: 'blur' }
        ],
        id_num: [
          { required: true, validator: IdentityCodeValid, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请输入授权明', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请输入授权明', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入授权明', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
      for (const i in val) {
        console.log(CodeToText[val[i]])
      }
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
  li {
    font-size: 12px;
    color: #aaa;
    line-height: 24px;
  }
  ul {
    margin:0;
    padding:0 10px;
  }
  .card-title {
    font-size: 14px;
    color: #aaa;
  }
</style>
